<template>
  <div :class="['searchbar', 'searchbar-' + theme]" @click="inputClick">
    <text :class="['icon', 'searchbar-icon-search', 'searchbar-icon-search-' + theme]">&#xe61a;</text>
    <input :class="['searchbar-input', 'searchbar-input-' + theme]" :placeholder="placeholder" v-bind:value="keywords"
            v-if="!disabled" :autofocus="autofocus" return-key-type="search" v-on:return="returnClick"
           v-on:input="updateValue"/>
    <text :class="['searchbar-input', 'searchbar-input-' + theme]" v-if="disabled">{{keywords || placeholder}}</text>
    <text :class="['icon', 'clear-btn', 'clear-btn-' + theme]" v-if="!disabled && keywords" @click="clear">&#xe61b;</text>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/mixin";
  @import "../sass/icon";
  $height: 65px;
  .searchbar {
    height: $height;
    border-radius: $height;
    flex-direction: row;
    position: relative;
    padding: 0 20px ;
    align-items: center;
    &-light {
      background-color: rgba(255, 255, 255, 0.4);
    }
    &-default {
      background-color: #F0F2F5;
    }
    &-input {
      font-size: 28px;
      padding-left: 20px ;;
      flex: 1;
      height: 52px;
      line-height: 52px;
      &-light {
        color: #ffffff;
        placeholder-color: #fff;
      }
      &-default {
        color: $color;
        placeholder-color: $color-muted;
      }
    }
    &-icon-search {
      font-size: 36px;
      line-height: 52px;
      height: 52px;
      font-weight: bold;
      &-light {
        color: #ffffff;
      }
      &-default {
        color: $color-muted;
      }
    }
  }
  .clear-btn {
    font-size: 24px;
    height: $height;
    line-height: $height;
    width: $height;
    text-align: right;
    color: $color-muted;
    &-light {
      color: #ffffff;
    }
  }

</style>
<script>
import {WxcPopover} from 'weex-ui'
require('../include/page-xdom')
module.exports = {
  mixins: [
  ],
  model: {
    prop: 'keywords'
  },
  props: {
    placeholder: {default: '搜索宝贝标题，领券购物，自购省钱'},
    theme: {default: 'default'},
    keywords: {default: ''},
    disabled: {default: false},
    autofocus: {default: false}
  },

  data () {
    return {}
  },
  components: {
    WxcPopover
  },
  created () {
  },
  methods: {
    updateValue (e) {
      this.keywords = e.target.attr.value
      // 通过 input 事件带出数值
      this.$emit('input', this.keywords)
    },
    clear () {
      this.keywords = ''
      // 通过 input 事件带出数值
      this.$emit('input', this.keywords)
      this.$emit('search', this.keywords)
    },
    inputClick (e) {
      this.$emit('click', e)
    },
    returnClick () {
      !this.disabled && this.$emit('search', this.keywords)
    }
  }
}
</script>
